<template>
  <div>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="5">
            <el-form-item label="匹配名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.match_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="匹配ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.match_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="创建日期">
              <el-date-picker
                v-model="searchData.create_date"
                type="date"
                placeholder="选择日期时间"
                style="width:100%;"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="创建人">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.creator"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="匹配类型">
              <el-select
                v-model="searchData.match_type"
                placeholder="请选择"
                style="width:100%;"
                clearable
              >
                <el-option label="普通类型" value="1"></el-option>
                <el-option label="交割" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="mini"
              @click="search()"
              style="margin-top:5px"
            >
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="mini" @click="add()">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="mini" @click="edit('alter')">
        <d2-icon name="edit" />
        修改
      </el-button>
      <el-button
        type="default"
        size="mini"
        icon="el-icon-delete"
        @click="del()"
      >
        删除
      </el-button>
      <el-button type="default" size="mini" @click="edit('check')">
        <d2-icon name="search" />
        查看
      </el-button>
      <el-button type="default" size="mini" @click="refresh">
        <d2-icon name="refresh" />
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          background: '#eef1f6',
          'text-align': 'center',
          color: '#606266'
        }"
        @row-click="handleSelectionChange"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="match_name" label="匹配名称"></el-table-column>
        <el-table-column
          prop="match_id"
          label="匹配ID"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_name"
          label="策略名称"
        ></el-table-column>
        <el-table-column
          prop="strategy_id"
          label="策略ID"
          sortable
        ></el-table-column>
        <el-table-column prop="match_type" label="匹配类型"></el-table-column>
        <el-table-column prop="creator_name" label="创建人"></el-table-column>
        <el-table-column prop="create_date" label="创建日期" sortable>
          <template slot-scope="scope">{{
            scope.row.create_date | dateYMDHMSFormat
          }}</template></el-table-column
        >
        <el-table-column
          prop="match_explain"
          label="匹配说明"
        ></el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { spotMatchBase } from "@/api/url_info.js";
import { editMatchBase } from "@/api/url_info.js";
export default {
  //现货匹配
  name: "spotMatch",
  components: {},
  data() {
    return {
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        match_name: "",
        match_id: "",
        strategy_name: "",
        strategy_id: "",
        create_date: "",
        creator: "",
        match_type: ""
      },
      multipleSelection: {},
      tableData: []
    };
  },
  created: function() {
    this.spotMatchInfo();
  },
  methods: {
    //网格信息
    spotMatchInfo() {
      spotMatchBase(this.searchData)
        .then(res => {
          this.tableData = [];
          let data = res.result.results;
          this.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            this.tableData[i] = {
              match_id: data[i]["match_id"],
              creator_name: data[i]["creator_name"],
              match_type: data[i]["match_type"],
              created_time: data[i]["created_time"],
              modified_time: data[i]["modified_time"],
              match_name: data[i]["match_name"],
              create_date: data[i]["create_date"],
              match_explain: data[i]["match_explain"],
              strategy_name: data[i]["strategy_name"],
              creator: data[i]["creator"],
              strategy_id: data[i]["strategy_id"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //删除
    del() {
      let that = this;
      let data = {
        operation: "DEL",
        match_id: that.multipleSelection.match_id
      };
      if (data.match_id) {
        that
          .$confirm("是否要删除？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            editMatchBase(data)
              .then(res => {
                that.searchData.page = 1;
                that.refresh();
                that.$message({
                  message: res.result,
                  type: "success"
                });
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          });
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 清空当前页缓存并刷新此页面
    refresh() {
      this.searchData.searchData = "";
      this.searchData.match_name = "";
      this.searchData.match_id = "";
      this.searchData.strategy_name = "";
      this.searchData.strategy_id = "";
      this.searchData.create_date = "";
      this.searchData.creator = "";
      this.searchData.match_type = "";
      this.multipleSelection = "";
      this.spotMatchInfo();
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.spotMatchInfo();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.spotMatchInfo();
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.spotMatchInfo();
    },
    //新增
    add() {
      this.$router.push({ path: "/spotMatch_E" });
    },
    //修改/查看
    edit(state) {
      let that = this;
      let data = that.multipleSelection;
      if (data.match_id) {
        that.$router.push({
          path: "/spotMatch_A",
          query: { match_id: data.match_id, state: state }
        });
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-radio {
  width: 100%;
  text-align: center;
  margin-top: 15px;
}
.el-form-item {
  margin-bottom: 15px !important;
}
</style>
